<script>
import {humanDetail} from "@/api/aihuman/humanConfig/config";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "humanBasicInfo",
  components: {},
  data() {
    return {
      dialogVisible: false,
      humanItem: null,
      humanData: {},
      dynamicTags: []
    }
  },
  methods: {
    getUrl,
    openDialog(data) {
      this.humanItem = data
      this.dialogVisible = true
      this.getDetail(data.id)
    },
    async getDetail(id) {
      const {data} = await humanDetail(id)
      console.log(data);
      this.humanData = data.data
      this.dynamicTags = data.data.aimetaTag && data.data.aimetaTag.split(',') || []
    }
  }
}
</script>

<template>
  <huilan-dialog
    title="基本信息"
    :visible.sync="dialogVisible"
    width="800px"
    append-to-body
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="human-img">
          <img :src="getUrl() + humanData.voiceImageLink" alt="">
        </div>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" disabled :model="humanData" label-width="auto">
          <el-form-item label="数字人名称" prop="aimetaName">
            <el-input v-model="humanData.aimetaName"></el-input>
          </el-form-item>
          <el-form-item label="用途" prop="aimetaUse">
            <el-radio-group v-model="humanData.aimetaUse">
              <el-radio label="1">数字解说员</el-radio>
              <el-radio label="2">智能交互</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="类型" prop="dimensionType">
            <el-radio-group v-model="humanData.dimensionType">
              <el-radio :label="2">2D</el-radio>
              <el-radio :label="3">Web3D</el-radio>
              <el-radio :label="4">UE3D</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="数字人标签">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              :disable-transitions="false">
              {{ tag }}
            </el-tag>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-switch
              v-model="humanData.status"
              :inactive-value="1"
              :active-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
      </el-col>

    </el-row>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
    </template>
  </huilan-dialog>
</template>

<style scoped lang="scss">
.human-img {
  img {
    height: 450px;
    width: 370px;
    object-fit: cover;
  }
}
</style>
